@charset "utf-8";
*{
    margin:0;
    padding:0;
}
.box{
    width:100px;
    height:100px;
    line-height: 100px;
    text-align: center;
    margin:100px auto 0;
}
.box1{
    @extend .box;
    background:pink;
    transition:all 1s;
}
.box2{
    @extend .box;
    background: skyblue;
}
.box1:hover{
   // height:200px;
    /*  transition 过渡
        transform 变形
        transform:translate(x,y)  平移 。默认为2d,x,y单位可以是像素或者百分比
        不论变形像素是多少，原来的位置仍然保留着，这个变形不会影响到页面的整体布局
    

    transform:translate(0,100px);
    transform:translateX(100%);//这样分开写，后面会覆盖前面的transform
    transform:translateX(100px) translateY(300px);

    transform:translateY(200%);*/

    //旋转 默认为Z轴  正值为顺时针旋转；负值为逆时针旋转。
    //transform: rotate(60deg);
   // transform:rotateX(60deg)


   //scale缩放
   //transform:scale(1.5);

   //斜切
   //transform:skew(90deg);

   //最终会转换成一个矩阵的形式
   transform:translate(100px,100px) rotate(360deg) scale(2) skew(60deg);
}